<template>
  <div v-if="configDetail" class="flex flex-col w-full h-full">
    <order-nav class="w-full" :title="$t(configDetail.methodName)"/>
    <div class="flex-1 w-full pt-56 overflow-auto">
      <div class="content pr-32 pl-32">
        <div class="flex items-center justify-center mb-60">
          <img class="w-80" :src="imgSrc(configDetail.methodImg)" alt="">
        </div>
        <c2c-input color="#7B7F87" :disabled="true" :value="configDetail.methodName"
                   :label="$t('支付方式配置')" />
        <c2c-input color="#7B7F87" :disabled="true" :value="configDetail.methodTypeName"
                   :label="$t('支付方式类型')" />
        <c2c-input
            v-model="params.name"
            :label="$t('真实姓名')"
            :placeholder="$t('真实姓名')"
        />
        <c2c-input
            v-for="(item, index) in list"
            :key="index"
            :label="$t(item[`paramName${parseInt(index) + 1}`])"
            v-model="item[`param_value${parseInt(index) + 1}`]"
            :placeholder="$t(item[`paramName${parseInt(index) + 1}`])"
        />
        <div class="mb-60" v-if="configDetail.methodType !== 1">
          <p class="mb-18 font-28" style="color: rgb(134, 141, 154);">{{ $t('支付二维码')}}</p>
          <van-uploader
              v-model="fileList"
              :after-read="afterRead"
              multiple
              :max-count="1"/>
        </div>
        <c2c-input
            :isTextArea="true"
            v-model="params.remark"
            :label="$t('备注')"
            :placeholder="$t('备注')"
        />
      </div>
      <div class="w-full pl-32 pr-32 pb-72 mt-325 box-border">
        <div class="font-24 mb-24" :style="{'color': '#868D9A'}">
          {{ $t('温馨提示：当您出售数字货币时，您选择的收款方式将向买方展示，请确认信息填写准确无误。') }}
        </div>
        <otc-button
            :disabled="fullDisabled"
            :text="$t('保存')"
            @btnClick="handlerClick"
        ></otc-button>
      </div>
    </div>
  </div>
</template>

<script>
import otcApi from "@/API/otc";

import {Button, Toast, Uploader} from 'vant';
import {_uploadImage} from '@/API/fund.api'

import OrderNav from "@/components/order-nav/OrderNav";
import C2cInput from "@/page/placeAnOrder/components/c2cInput/C2cInput";
import OtcButton from "@/components/otc-button/OtcButton";
import { BASE_URL } from "@/config";

export default {
  name: "CN",
  // configType 编辑/添加
  props: ["configType", 'id'],
  data() {
    return {
      configDetail: null,
      disabled1: false, //
      disabled2: false, //
      list: [],
      params: {
        name: '',
        remark: '',
      },
      fileList: [],
    }
  },
  created() {
    if (this.configType === 'add') {
      this.getPaymentMethodConfigDetail();
      this.getUserName();
    } else if (this.configType === 'edit') {
      this.getPaymentMethodDetail();
    }

  },
  methods: {
    afterRead(file) {
      file.status = 'uploading'
      file.message = this.$t('上传中...')
      // 上传图片到服务器
      _uploadImage(file).then(res => {
        file.status = 'success';
        file.message = this.$t('上传成功');
        file.resURL = res
      }).catch(err => {
        file.status = 'failed';
        file.message = this.$t('图片上传失败');
      })
    },
    handlerClick() {
      if (this.configType === 'add') {
        this.save();
      } else {
        this.edit();
      }
    },
    // 获取实名
    async getUserName() {
      const res = await otcApi.getUserName()
      this.params.name = res.data.name || '';
    },
    // 添加
    async save() {
      const params = this.formatParams('method_config_id');

      const res = await otcApi.ctcPaymentMethodAddPay(params)

      Toast({
        message: this.$t('添加成功')
      })

      setTimeout(() => {
        this.$router.replace({
          path: '/paymentMethod'
        })
      }, 1000)
    },
    formatParams(id) {
      const params = {
        [id]: this.configDetail.id,
        real_name: this.params.name,
        remark: this.params.remark,
        qrcode: (this.fileList[0] && this.fileList[0].resURL) || (this.fileList[0] && this.fileList[0].url) || ''
      }

      this.list.forEach(item => {
        Object.keys(item).forEach(key => {
          if (key.indexOf('param_value') !== -1) {
            params[key] = item[key]
          }
        })
      })

      return params;
    },
    async edit() {
      const params = this.formatParams('id');
      console.log(params);

      const res = await otcApi.ctcPaymentMethodUpdate(params);
      console.log(res);
      Toast({
        message: this.$t('保存')
      })

      setTimeout(() => {
        this.$router.replace({
          path: '/paymentMethod'
        })
      }, 1000)
    },
    formatData(data) {
      let index = 1;
      Object.keys(data).forEach(key => {
        if (key.indexOf('paramName') !== -1) {
          if (this.configDetail[key] && this.configDetail[key].length > 0) {
            if (this.configType === 'edit') {
              console.log(key, index);
              this.list.push({
                ['paramName' + index]: this.configDetail['paramName' + index],
                ['param_value' + index]: this.configDetail['paramValue' + index],
              })
            } else {
              this.list.push({
                ['paramName' + index]: this.configDetail[key],
                ['param_value' + index]: '',
              })
            }
            index++;
          }
        }
      })
    },
    async getPaymentMethodConfigDetail() {
      const res = await otcApi.paymentMethodConfigDetail({ id: this.id, language: this.$i18n.locale })
      this.configDetail = res.data;

      this.formatData(this.configDetail)
    },
    async getPaymentMethodDetail() {
      const res = await otcApi.ctcPaymentMethodDetail({ id: this.id, language: this.$i18n.locale })
      this.configDetail = res.data;
      this.formatData(this.configDetail)
      this.initData();
    },
    initData() {
      this.params.name = this.configDetail.realName;
      this.params.remark = this.configDetail.remark;
      this.fileList.push({
        url: this.imgSrc(this.configDetail.qrcode),
        resURL: this.configDetail.qrcode
      })
    },
    imgSrc(path) {
      if (path.indexOf('http') !== -1) {
        return path
      } else {
        const url = `${BASE_URL}public/showimg!showImg.action?imagePath=`
        return url + path;
      }
    },
  },
  computed: {
    bankNumber: {
      get() {
        return this.info.number && this.info.number.replace(/(\d{4})/g, '$1 ').trim()
      },
      set(newVal) {
        this.info.number = newVal;
      }
    },
    fullDisabled() {
      return this.disabled1 && this.disabled2
    }
  },
  components: {
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    OrderNav,
    C2cInput,
    OtcButton,
  },
  watch: {
    // 是否存在空值
    list: {
      deep: true,
      handler() {
        const res = this.list.filter((item, index) =>{
          if (index!=2){
            return item[`param_value${parseInt(index) + 1}`] === "" || item[`param_value${parseInt(index) + 1}`] === undefined
          }
        })
        this.disabled1 = res.length === 0;
      },
      immediate: true
    },
    params: {
      deep: true,
      handler() {
        const res = Object.keys(this.params).filter(key => {
            if (key !=='remark'){
              return this.params[key] === "" || this.params[key] === undefined
            }
          }
        )
        this.disabled2 = res.length === 0;
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .payment-input-wrapper {
    margin-bottom: 60px;

    input {
      height: 100px;
    }
  }

  .van-uploader__upload {
    width: 180px !important;
    height: 180px !important;
  }
    .van-button--info {
      background: $btn_main !important;
      border-color: $btn_main !important;
      color:#000 !important;
    }
}

.desc {
  width: 100%;
  padding: 46px 24px;
  border-radius: 8px;
  background: #F0F1F4;
}
</style>